// ? banner
#banner {
  position: relative;
  width: 100%;
  min-height: 100%;

  img {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .content {
    position: absolute;
    top: 25%;
    right: 5%;
    width: 4.9rem;

    h2 {
      font-size: .38rem;
    }

    p {
      font-size: .18rem;
      color: #787878;
    }

    button {
      width: 1.85rem;
      height: .55rem;
      font-size: .12rem;
      background-color: #1ecbc6;
      outline: none;
    }
  }
}

// ? video
#video {

  .video-title {
    margin-bottom: .5rem;

    .title {
      font-size: .3rem;
    }

    .text {
      font-size: .16rem;
      color: #787878;
    }
  }

  .videos {
    height: 5.7rem;
    background-color: #8e8e8e;

    &::after,
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      transform: translate(-50%, -50%);
    }

    &::after {
      width: .85rem;
      height: .85rem;
      background-color: #10c9c3;
      border-radius: 50%;
      z-index: 1;
    }

    &::before {
      width: 0;
      height: 0;
      border: .1rem solid transparent;
      border-left-color: #fff;
      z-index: 2;
      margin-left: .08rem;
    }
  }
}

// ? skills
#skills{
  .content{
    left: 20%;
  }
}


// ? icons2
#icons2 {
  background-color: #f5f5f5;

  .center {
    i {
      font-size: .4rem;
      color: #656565;
    }
  }

  .content {
    margin-top: .3rem;

    .title {
      font-size: .12rem;
      margin-bottom: .18rem;
    }

    .about {
      color: #8e8e8e;
      font-size: .16rem;
    }
  }
}

// ? banner2
#banner2 {
  padding: 1.75rem 0 .55rem 0;
  background-color: #10c9c3;
  color: #fff;

  .content {
    // width: 8.15rem;
    font-size: .24rem;

    .text {
      margin-bottom: .3rem;
    }

    .text-up {
      font-size: .12rem;
      margin-bottom: 1rem;
    }

    .page {
      display: flex;
      justify-content: center;

      span {
        display: block;
        width: .06rem;
        height: .06rem;
        border-radius: 50%;
        background-color: #b0e8e6;
        margin: .05rem;
      }

      span:nth-child(2) {
        background-color: #fff;
        transform: scale(1.5);
      }
    }
  }
}

// ? sponsor
#sponsor {
  padding: .5rem 0;

  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    .item {
      margin: .3rem;
    }
  }
}

// ? form
#form {
  background-color: #f5f5f5;

  .title {
    margin-bottom: .4rem;

    h3 {
      font-size: .3rem;
      margin-bottom: .35rem;
    }

    p {
      font-size: .16rem;
      color: #8e8e8e;
    }
  }

  .form {
    input {
      height: .5rem;
    }

    .row:nth-child(2) {
      margin: .3rem 0;
    }

    textarea {
      height: 1.7rem;
      resize: none;
    }

    button {
      outline: none;
      width: 1.8rem;
      height: .58rem;
      font-size: .12rem;
    }
  }
}